<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>作业1</title>
</head>
<style type="text/css">
    .wrap{
        position: relative;
        width: 500px;
        height: 343px;
        margin: 0 auto;
    }
    #box{
        width: 500px;
        height: 343px;
    }
    .msg_out{
        display: none;
    }
    .msg_in{
        display: block;
        position: absolute;
        top: 243px;
         width: 500px;
        height: 100px;
        line-height: 100px;
        font-size: 30px;
        text-align: center;
        color: lightblue;
        background: rgba(0,0,40,.3);
    }
</style>
<body>
    <div class="wrap">
        <div id="box"><img src="mla.jpg"></div>
        <div id="msg" class="msg_out">超级马里奥兄弟</div>
    </div>
</body>
<script type="text/javascript">
	/*获取class的方法返回一个类数组*/
	/*js注重父子关系*/
	var oWrap = document.getElementsByClassName("wrap")[0];/*获取第一个元素*/
    var oMsg = document.getElementById('msg');
    oWrap.onmouseenter = function(){
        oMsg.className = 'msg_in';
    }
    oWrap.onmouseleave = function(){
        oMsg.className = 'msg_out';
    }
</script>
</html>